@include('admin._include.header')

<style>
    .layui-upload-list{
        margin-left: 20px;
    }
    .layui-upload-item{
        width: 100px;
        height: 100px;
        margin: 20px;
        float: left;
    }
    .layui-upload-item p{
        color: #fff;
        z-index: 99999;
        background: red;
        line-height: 20px;
        height: 20px;
        text-align: center;
        width: 100%;
        cursor:pointer;
    }

    .layui-upload-item img{
        width: 100%;
        height: 90px;
        cursor:pointer;
    }

    .layui-elem-quote{
        margin: 40px 40px 20px 20px;
        line-height:10px
    }

</style>
<body class="auth-user" style="background: #fff">
<div class="layui-fluid">
    <div class="layui-row larryms-panel auth-user-add">
        <form class="layui-form" method="post">

            <div class="layui-form-item">

                <div class="layui-upload">
                    <blockquote class="layui-elem-quote">商品主图：
                        <button type="button" class="layui-btn layui-btn-sm test-upload-normal" data-name="banner_images" >上传图片</button>
                    </blockquote>
                    <div class="layui-upload-list">
                        @if(count($banner))
                            @foreach($banner as $item)
                                <div class="layui-upload-item">
                                    <img src="{{$item}}" class="layui-upload-img enlarge">
                                    <p class="layui-upload-item-delete">删除</p>
                                    <input type='hidden' name='banner_images[]' value="{{$item}}">
                                </div>
                            @endforeach
                        @endif


                    </div>
                </div>

            </div>


            <div class="layui-form-item">

                <div class="layui-upload">
                    <blockquote class="layui-elem-quote">商品详情图：
                        <button type="button" class="layui-btn layui-btn-sm test-upload-normal" data-name="detail_images">上传图片</button>
                    </blockquote>
                    <div class="layui-upload-list">

                        @if(count($detail))
                            @foreach($detail as $item)
                                <div class="layui-upload-item">
                                    <img src="{{$item}}" class="layui-upload-img enlarge">
                                    <p class="layui-upload-item-delete">删除</p>
                                    <input type='hidden' name='detail_images[]' value="{{$item}}">
                                </div>
                            @endforeach
                        @endif

                    </div>
                </div>

            </div>



{{--            <div class="layui-form-item">--}}

{{--                <div class="layui-upload">--}}
{{--                    <blockquote class="layui-elem-quote">商品参数：--}}
{{--                        <button type="button" class="layui-btn layui-btn-sm test-upload-normal" data-name="param_images">上传图片</button>--}}
{{--                    </blockquote>--}}
{{--                    <div class="layui-upload-list">--}}

{{--                        @if(count($param))--}}
{{--                            @foreach($param as $item)--}}
{{--                                <div class="layui-upload-item">--}}
{{--                                    <img src="{{$item}}" class="layui-upload-img enlarge">--}}
{{--                                    <p class="layui-upload-item-delete">删除</p>--}}
{{--                                    <input type='hidden' name='param_images[]' value="{{$item}}">--}}
{{--                                </div>--}}
{{--                            @endforeach--}}
{{--                        @endif--}}


{{--                    </div>--}}
{{--                </div>--}}

{{--            </div>--}}


            <div class="layui-form-item">

                <div class="layui-upload">
                    <blockquote class="layui-elem-quote">商品下载图片：
                        <button type="button" class="layui-btn layui-btn-sm test-upload-normal" data-name="download_images">上传图片</button>
                    </blockquote>
                    <div class="layui-upload-list">

                        @if(count($downloadImage))
                            @foreach($downloadImage as $item)
                                <div class="layui-upload-item">
                                    <img src="{{$item}}" class="layui-upload-img enlarge">
                                    <p class="layui-upload-item-delete">删除</p>
                                    <input type='hidden' name='download_images[]' value="{{$item}}">
                                </div>
                            @endforeach
                        @endif

                    </div>
                </div>

            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商品下载视频</label>
                <div class="layui-input-inline" style="width: 450px">
                    <input type="text" name="download_video" placeholder="请填写视频地址" value="{{$downloadVideo}}"
                           autocomplete="off" class="layui-input larry-input">
                </div>
            </div>



            <div class="layui-form-item" style="text-align: center">
                <input type="hidden" name="id" value="">
                <button class="layui-btn" style="width: 200px" lay-submit lay-filter="ad_add">确定</button>
            </div>

        </form>
    </div>
</div>

<script>
    layui.config({
        base: "/plugin/layuiadmin/" //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'upload','form'], function(){
        var $ = layui.jquery,
            upload = layui.upload;
        form = layui.form;
        var index_upload;

        var uploadInst = upload.render({
            elem: '.test-upload-normal',
            url: '{{url('api/public/upload')}}',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            multiple: true,
            accept: 'images',
            acceptMime: 'image/*',
            field: 'file',
            before: function(obj){
                index_upload = layer.load(1);
            },
            done: function(res){
                var that = this.item;

                layer.close(index_upload);
                if(res.status != SUCCESS){
                    return layer.msg(res.message);
                }else{
                   var content = "<div class=\"layui-upload-item\">\n" +
                       "                            <img src="+res.data+" class=\"layui-upload-img enlarge\">\n" +
                       "                            <p class=\"layui-upload-item-delete\">删除</p>\n" +
                       "                            <input type='hidden' name='"+that.data('name')+"[]' value="+res.data+">\n" +
                       "                        </div>"
                    that.parent().next().append(content)
                }
            }
        });

        $(document).on('click', '.layui-upload-item-delete', function () {
            $(this).parent().remove();
        });
        form.on('submit(ad_add)', function(data) {
            var index = layer.load(1);
            $.ajax({
                url:"{{url('goods/edit-file')}}/{{$id}}",
                dateType:'json',
                data:data.field,
                type:'post',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success:function (res) {
                    layer.close(index);
                    layer.msg(res.message);
                    if(res.status == SUCCESS){
                        var iframe = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(iframe); //再执行关闭
                    }
                }
            });

            return false;
        });


    });
</script>

</body>
@include('admin._include.footer')